<!-- 新增/编辑电子签章配置弹框 -->
<template>
  <div class="addSignConfig">
    <div ref="queryFormBox">
      <MyForm
        ref="formRef"
        v-model="fromValue"
        :is-mar-top="true"
        :form-option="addFormOption"
        :select-list="dicLists"
        @handleEvent="handleEvent"
      >
        <template #docType>
          <el-select
            v-model="fromValue.docType"
            size="mini"
            clearable
            multiple
            collapse-tags
            :multiple-limit="multipleLimit"
            placeholder="请选择"
            @focus="docTypeClick"
          >
            <el-option v-for="it in selectOption" :key="it.DOCTYPE" :label="it.DOCNAME" :value="it.DOCTYPE" />
          </el-select>
        </template>
      </MyForm>
    </div>
  </div>
</template>

<script>
import MyForm from '@/components/basic/myForm'
import { getDropdownData } from '@/api/common' // 字典接口
import { addFormOption } from '.'
import { queryDocTypeApi } from '@/api/attachManagement/electronicSign/electronicSignConfig'
import { getPrjStageApi, getPrjNodeNameApi } from '@/api/attachmentInfo'

export default {
    name: 'AddSignConfig',
    components: {
        MyForm
    },
    props: {
        editCheckId: {
            type: Number,
            default: null
        },
        multipleLimit: {
            type: Number,
            default: 0
        },
        itemInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            addFormOption,
            fromValue: {},
            dicLists: {}, // 下拉框选项
            docReadOnly: false, // 文档类型下拉框只读
            selectOption: []
        }
    },
    created() {
        console.log(this.fromValue, 'fromValue')
        this.getDictData()
        this.getPrjStage()
        this.getPrjNodeName(this.fromValue.prjStage)
        addFormOption.itemData.forEach(item => {
            const defaultVal = this.itemInfo[item.prop] ?? null
            if (item.prop === 'docType') {
                this.editCheckId && this.queryDocType(this.itemInfo['prjNodeId'])
                item.value = this.editCheckId ? defaultVal.split() : []
            } else {
                item.value = this.editCheckId ? defaultVal : ''
            }
        })
    },
    methods: {
        // 表单校验
        formValidate() {
            let flag = true
            this.$refs.formRef.$refs.queryFormRef.validate((valid) => {
                flag = valid
            })
            return flag
        },
        // 触发文档类型事件
        docTypeClick() {
            if (!this.fromValue.prjNodeId) {
               return this.$message.info('请选择项目节点')
            }
        },
        // 事件处理
        handleEvent(prop, val) {
            console.log(prop, val, '表单事件处理')
            if (prop === 'prjNodeId') {
                this.fromValue.docType = []
                this.queryDocType(val)
            } 
             if (prop === 'prjStage') {
                this.getPrjNodeName(val)
                this.fromValue.prjNodeId = ''
            }
        },
        // 获取项目阶段字典
        async getPrjStage() {
            const res = await getPrjStageApi()
            this.$set(this.dicLists, 'PRO_STAGE', res.data ?? [])
            if (!res.data.length) {
                this.fromValue.prjStage = ''
            }
        },
        // 获取项目节点字典
        async getPrjNodeName(val) {
            const res = await getPrjNodeNameApi({ stageList: val ?? '' })
            this.$set(this.dicLists, 'PRO_NODE', res.data ?? [])
            if (!res.data.length) {
                this.fromValue.prjNodeId = ''
                this.$message.info('此项目阶段暂无项目节点')
            }
        },
        // 获取文档类型
        async queryDocType(val) {
            if (!val) {
                return this.$message.warning('请选择项目节点')
            }
            const res = await queryDocTypeApi({ nodeId: val ?? '' })
            this.selectOption = res.data ?? []
            if (!res.data.length) {
                this.fromValue.docType = []
                this.$message.info('此节点暂无文档类型')
            }
        },
        // 获取下拉框数据
        async getDictData() {
            const arr = ['IS_NEWBUSINESS', 'PROJ_TYPE', 'BUILD_MODES', 'VIEW_TYPE']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.addSignConfig {
    width: 100%;
}
</style>

<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item {
    /* width: 240px; */
}
</style>
